<template>
    <div>
        <div class="cTitle">账号登录</div>
        <el-form :model="loginForm" :rules="logRules" ref="loginForm" class="demo-ruleForm" status-icon>
            <div style="margin-bottom: 5%">
                <el-form-item prop="logTelphone">
                    <el-input
                            placeholder="请输入手机号"
                            maxlength="11"
                            v-model.number="loginForm.logTelphone">
                        <i slot="prefix" class="phonePic"></i>
                    </el-input>
                </el-form-item>
            </div>
            <div style="margin-bottom: 5%">
                <el-form-item prop="logPassword">
                    <el-input
                            placeholder="请输入密码"
                            type="password"
                            v-model="loginForm.logPassword"
                            autocomplete="off"
                            @keyup.enter.native="submitForm('loginForm')">
                        <i slot="prefix" class="passPic"></i>
                    </el-input>
                </el-form-item>
            </div>
            <div class="regBtnTop">
                <div style="cursor:pointer;" @click="changeHook">
                    <!--                    <el-checkbox v-model="checked"></el-checkbox>-->
                    <img src="../../static/images/register/组 8@2x.png"
                         class="img1"
                         v-if="showHook">
                    <img src="../../static/images/register/kuang.png"
                         class="img2"
                         v-if="!showHook">
                    记住我
                </div>
                <div style="color: #2d9fd8;cursor: pointer" @click="changeShow(3)">忘记密码?</div>
            </div>
            <div style="margin-bottom: 5%;">
                <el-form-item>
                    <el-button class="regButton" @click="submitForm('loginForm')">登录</el-button>
                </el-form-item>
            </div>
        </el-form>

        <div class="regBtnBottom">

            <!-- @click='clickWxLogin'-->
            <div style="cursor:pointer;">
                <!--                <img src="../../static/images/register/微信方.png"-->
                <!--                     style="height: 17px;position: relative;bottom: 2px;font-size: 12px;">微信登录-->
            </div>
            <div class="bottomReg">
                <div class="brOne">尚未注册?</div>
                <div class="brTwo" @click="changeShow(1)">去注册</div>
            </div>
        </div>
    </div>
</template>

<script>
    import Cookies from 'js-cookie'
    import CryptoJS from "crypto-js";

    export default {
        name: "login",
        data() {
            //登录手机号验证
            var checkPhone = (rule, value, callback) => {
                this.loginForm.logTelphone = value
                // console.log(this.loginForm.logTelphone)
                var numLength = value.toString().length
                var myreg=/^[1][3,4,5,6,7,8,9][0-9]{9}$/;
                if (!value) {
                    return callback(new Error('请检查或重新输入手机号'));
                }
                setTimeout(() => {
                    if (!Number.isInteger(value)) {
                        callback(new Error('请输入数字值'));
                    } else {
                        if (numLength < 11 || !myreg.test(value.toString())) {
                            callback(new Error('请检查填写正确的手机号码'));
                        } else {
                            callback();
                        }
                    }
                }, 500);
            };
            //登录密码验证
            var checkPass = (rule, value, callback) => {
                this.loginForm.logPassword = value
                if (value === '') {
                    callback(new Error('请输入密码'));
                } else {
                    if (value !== '') {
                        callback();
                    }
                }
            };

            return {
                //register-footer
                showHook: false,

                //加密解密
                enText: '',
                unText: '',
                sectText: '',

                //cookies
                firlogTelphone: '',
                firlogPassword: '',

                //切换登录注册
                showLog: '',
                //登录表单验证
                loginForm: {
                    logTelphone: '',
                    logPassword: '',
                },
                logRules: {
                    logTelphone: [
                        {validator: checkPhone, trigger: 'blur'}
                    ],
                    logPassword: [
                        {validator: checkPass, trigger: 'blur'}
                    ],
                },
            }
        },
        methods: {
            //微信登录
            clickWxLogin() {
                this.$emit('wxShow', 4)
            },
            //切换成登录注册
            changeShow(e) {
                this.showLog = e;
                // console.log(this.showLog)
                this.$emit('logShow', this.showLog)
            },

            //登录
            goLogin() {
                this.$post('/login', {
                    "username": this.loginForm.logTelphone,
                    "password": this.loginForm.logPassword,
                    "loginType": 0
                }).then(res => {
                    if (res.data.code != 200) {
                        layer.msg(res.data.msg, {});
                    } else {
                        localStorage.setItem('token', res.headers.authorization)
                        sessionStorage.setItem('token', res.headers.authorization)
                        if (this.showHook) {
                            let pass = this.loginForm.logPassword
                            //加密 密码
                            this.encryption(pass)
                            Cookies.set('logTelphone', this.loginForm.logTelphone, {expires: 7});
                            //保存被加密的密码
                            Cookies.set('logPassword', this.enText, {expires: 7});
                        } else {
                            Cookies.remove('logTelphone');
                            Cookies.remove('logPassword');
                        }
                        // this.$message('登录成功')
                        this.$message({
                            message: '登录成功',
                            type: 'success'
                        });
                        this.$router.push('/studyCenter')
                    }
                })
            },

            //验证表单
            submitForm(formName) {
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        this.goLogin()
                    } else {
                        // this.$alert('请检查表单')
                        return false;
                    }
                });
            },

            //记住我
            rememberMe() {
                Cookies.set('logTelphone', this.loginForm.logTelphone, {expires: 7});
                //保存expires七天且secure加密
                // Cookies.set('logPassword', this.loginForm.logPassword, {secure: true, expires: 7});
                Cookies.set('logPassword', this.loginForm.logPassword, {expires: 7});

                if (this.showHook) {
                    Cookies.set('showHook', this.showHook);
                } else {
                    Cookies.remove('showHook');
                    Cookies.remove('logTelphone');
                    Cookies.remove('logPassword');
                }
            },

            //改变图片
            changeHook() {
                this.showHook = !this.showHook
                let phone = this.loginForm.logTelphone
                let pass = this.loginForm.logPassword
                if (!this.showHook) {
                    Cookies.remove('logTelphone');
                    Cookies.remove('logPassword');
                }
            },

            //加密方法
            encryption(text) {
                let sText = text.toString()
                var cipherText = CryptoJS.AES.encrypt(
                    sText,
                    this.sectText
                ).toString();
                this.enText = cipherText
            },

            //解密方法
            uncryption(text) {
                // Decrypt 解密
                var bytes = CryptoJS.AES.decrypt(text, this.sectText);
                var originalText = bytes.toString(CryptoJS.enc.Utf8);
                this.loginForm.logPassword = originalText
            },
        },


        mounted() {
            let phone = Cookies.get('logTelphone')
            //拿到已加密的密码
            let pass = Cookies.get('logPassword')
            if (phone === undefined && pass === undefined) {
                this.loginForm.logTelphone = ''
                this.loginForm.logPassword = ''
                this.showHook = false
            } else {
                this.loginForm.logTelphone = Number(phone)
                //解密密码
                this.uncryption(pass)
                this.showHook = true
            }
        }
    }
</script>

<style lang="scss">

</style>